<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>汉字心智测评</title>
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 自定义配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4A6FA5',
            secondary: '#6B8EAF',
            accent: '#E76F51',
            neutral: '#F4F4F9',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .bg-gradient-custom {
        background: linear-gradient(135deg, #4A6FA5 0%, #6B8EAF 100%);
      }
      .transition-custom {
        transition: all 0.3s ease-in-out;
      }
      .card-hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
  <!-- 页面容器 -->
  <div class="container mx-auto px-4 py-8 max-w-md flex-grow">
    <!-- 标题部分 -->
    <div class="text-center mb-12">
      <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-primary mb-4">汉字心智测评</h1>
      <p class="text-gray-600 leading-relaxed">
        欢迎使用汉字AI心智分析系统，该系统基于中国5000年文化基因与汉字音形义三要素，对测试者的意识与潜意识进行心理分析，利用AI大语言模型输出分析结果，可在一定程度上反应或启发人的思维方式、潜意识主题等心理活动，欢迎体验！
      </p>
    </div>

    <!-- 功能入口卡片 -->
    <div class="space-y-6">
      <!-- 功能入口1：汉字自由联想心理分析 -->
      <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-custom cursor-pointer" id="analysis-route">
        <div class="flex justify-between items-center mb-3">
          <h3 class="text-xl font-bold text-primary">汉字自由联想心理分析</h3>
          <span class="px-3 py-1 bg-blue-100 text-primary rounded-full text-sm">方式1 全面分析</span>
        </div>
        <p class="text-gray-600 mb-3">通过自由联想的30个汉字，全面分析您的内心世界</p>
        <div class="flex justify-between items-center">
          <span class="text-sm text-gray-500">用时约3-5分钟</span>
          <i class="fa fa-arrow-right text-primary"></i>
        </div>
      </div>

      <!-- 功能入口2：字问人生 -->
      <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-custom cursor-pointer" id="word-question-route">
        <div class="flex justify-between items-center mb-3">
          <h3 class="text-xl font-bold text-primary">字问人生</h3>
          <span class="px-3 py-1 bg-blue-100 text-primary rounded-full text-sm">方式2 主题分析</span>
        </div>
        <p class="text-gray-600 mb-3">针对特定问题，通过汉字探索深层次的心理需求</p>
        <div class="flex justify-between items-center">
          <span class="text-sm text-gray-500">用时约1-2分钟</span>
          <i class="fa fa-arrow-right text-primary"></i>
        </div>
      </div>
    </div>

    <!-- 测评记录入口 -->
    <div class="mt-12 text-center">
      <a href="#" class="text-primary hover:text-primary/80 transition-custom">
        <span>我的测评记录</span>
        <i class="fa fa-history ml-1"></i>
      </a>
    </div>
  </div>

  <!-- 页脚 -->
  <footer class="py-6 text-center text-gray-500 text-sm">
    <p>© 2024 汉字心智测评 | 仅供参考，非专业心理诊断</p>
  </footer>

  <!-- JavaScript -->
  <script>
    // 功能入口点击事件
    document.getElementById('analysis-route').addEventListener('click', function() {
      window.location.href = 'gender-age.html';
    });

    document.getElementById('word-question-route').addEventListener('click', function() {
      window.location.href = 'word-question.html';
    });

    // 添加卡片悬停效果
    document.querySelectorAll('.bg-white.rounded-xl').forEach(card => {
      card.addEventListener('mouseenter', function() {
        this.classList.add('card-hover');
      });
      card.addEventListener('mouseleave', function() {
        this.classList.remove('card-hover');
      });
    });
  </script>
</body>
</html>